<template>
  <div class="swiperBan white_bg">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,key) in bannerArry" :key="key">
        <img v-if="item.picUrl" @click="jumpChange(item)" v-lazy="item.picUrl">
        <img v-if="!item.picUrl" v-lazy="item.picUrl">
      </mt-swipe-item>
    </mt-swipe>
    <div class="elliptical white_bg" v-if="divStyle"></div>
  </div>
</template>

<script>
  import {
    Swipe,
    SwipeItem,
    Toast
  } from 'mint-ui';
  import getData2 from '../../service/getData2.js'
  import {Storage} from 'src/utils/storage.js'
  import getData4 from '../../service/getData4.js'
  export default {
    name: 'tabImg',
    data() {
      return {
        id:'',
        swiperOption: {
          autoplay: 3000,
          direction: 'horizontal',
          setWrapperSize: true,
          autoHeight: true,
          pagination: '.swiper-pagination',
          debugger: true,
          loop: true
        }
      }
    },
    props: ["divStyle", "bannerArry"],
    created: function() {

    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {},
    methods: {
      //点击跳转到发现详情
      jumpFind: function(item) {
        let mchtId = item.couponBanner.mchtId;
        let couponId = parseInt(item.couponBanner.couponId);
        let num = item.surplusnum;
        let type = item.type2;
        let me = this;
        me.$router.push({
          "path": '/expiredDetail/' + mchtId + '/' + couponId + '/' + num,
          query: {couStat:'used', type2:type,flag:'disabled'}
        });

      },
     jumpChange(item) { //赋值，跳转兑换券页面
            this.$store.commit('changeState', true)
            getData4.findSeqno({couponId: parseInt(item.couponBanner.couponId),mchtId:item.couponBanner.mchtId}).then(res=>{
                if(res.content.list.length!=0){
                    let info = res.content.list[0]
                    item.couponBanner.id=res.content.list[0].id
                    item.couponBanner.usrId=res.content.list[0].usrId
                    Storage.set('couponInfo', item.couponBanner, false);
                    this.$router.push({
                        path: "/exchange",
                        query: {
                            surplusnum: info.sellNum
                        }
                    })
                }else{
                    this.$router.push({
                        name: 'couDetail',
                        query: {
                            seq:  '',
                            couponId: parseInt(item.couponBanner.couponId),
                            mchtId: item.couponBanner.mchtId,
                            usrPicId: '',
                            usrId: res.usrId || res.sellUsr || '' // 挂单用户ID
                        }
                    });
                }
            })
      }
    }
  }
</script>
<style>
  .swiperBan {
    width: 100%;
    height:100%;
    box-sizing: border-box;
  }

  .swiperBan .swiper-slide img {
    width: 100%;
  }

  .swiperBan {
    position: relative;
    overflow: hidden;
  }

  .elliptical {
    width: 120%;
    height: 3rem;
    position: absolute;
    bottom: -1.5rem;
    left: -10%;
    z-index: 1;
    border-radius: 70%;
  }

  .swiperBan .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 1.6rem;
    height: 1.1rem;
    line-height: 1.1rem;
    right: .667rem;
    left: auto;
    width: 6rem;
    background: rgba(54, 53, 53, .5);
    border-radius: 1rem;
  }

  .swiperBan .swiper-pagination-bullet {
    background: #bab8b8;
    opacity: 1;
  }

  .swiperBan .swiper-pagination-bullet-active {
    background: #ec4e8a;
  }

  .swiperBan .mint-swipe {
    background: #bab8b8;
  }
  .swiperBan .mint-swipe .mint-swipe-items-wrap{
    background-image: url("./images/coupon.jpg");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }
  .swiperBan .mint-swipe img {
    width: 100%;
    height: 100%;
  }

  .swiperBan .mint-swipe-indicators {
    left: auto;
    right: 0.1rem;
    bottom: 0 !important;
    border-radius: 1rem;
    transform: translateX(0);
  }

  .swiperBan .mint-swipe-indicator {
    background: #fff;
    opacity: 1;
  }

  .swiperBan .mint-swipe-indicator.is-active {
    background: #ec4e8a;
  }

  .swiperBan .mint-swipe-indicator {
    width: 1.1rem;
    height: 0.15rem;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
    margin: 0 0.15rem;
  }
</style>
